<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
    <style>
        .layui-form-item .layui-input-inline {
            width: 150px;
        }

        .layui-form-label {
            padding: 9px 5px;
            width: auto;
        }

        .confirm-btn {
            text-align: center;
            pointer-events: auto;
            user-select: none;
            -webkit-user-select: none
        }

        .confirm-btn a {
            height: 28px;
            line-height: 28px;
            margin: 5px 5px 0;
            padding: 0 15px;
            border: 1px solid #dedede;
            background-color: #fff;
            color: #333;
            border-radius: 2px;
            font-weight: 400;
            cursor: pointer;
            text-decoration: none
        }

        .confirm-btn a:hover {
            opacity: .9;
            text-decoration: none
        }

        .confirm-btn a:active {
            opacity: .8
        }

        .confirm-btn a {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: top
        }

        .confirm-btn .color {
            border-color: #1E9FFF;
            background-color: #1E9FFF;
            color: #fff
        }

        .layui-table-cell {
            height: 60px;
            line-height: 28px;
        }

        .layui-table-header .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        .layui-table-total {
            height: 35px;
            line-height: 35px;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <form class="layui-form" id="sbumitForm">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline ">
                            <label class="layui-form-label">主播ID</label>
                            <div class="layui-input-inline" style="width:120px">
                                <input type="text" name="anchor_id" placeholder="请输入主播ID" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">直播分类</label>
                            <div class="layui-input-inline" style="width: 80px">
                                <select name="category_id" lay-filter="category_id">
                                    <option value="">全部</option>
                                    <option value="1">体育</option>
                                    <option value="2">电竞</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">发起时间</label>
                            <div class="layui-input-inline" style="width:100px">
                                <input type="text" name="question[start_time]" class="layui-input"
                                    id="question_start_time" readonly placeholder="开始日期">
                            </div>
                            <div class="layui-input-inline" style="width:25px;text-align: center;line-height: 38px">
                                至
                            </div>
                            <div class="layui-input-inline" id="questiondiv" style="width:100px">
                                <input type="text" name="question[end_time]" class="layui-input" id="question_end_time"
                                    readonly placeholder="结束日期">
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline" style="width: 80px">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0">已开盘</option>
                                    <option value="1">已结算</option>
                                    <option value="2">已作废</option>
                                    <option value="3">未结算</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">奖池金额</label>
                            <div class="layui-input-inline" style="width:90px">
                                <input type="text" name="pot[lowest]" class="layui-input" placeholder="最低">
                            </div>
                            <div class="layui-input-inline" style="width:25px;text-align: center;line-height: 38px">
                                至
                            </div>
                            <div class="layui-input-inline" style="width:90px">
                                <input type="text" name="pot[highest]" class="layui-input" placeholder="最高">
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">封盘时间</label>
                            <div class="layui-input-inline" style="width:100px">
                                <input type="text" name="sell[start_time]" class="layui-input" id="sell_start_time"
                                    readonly placeholder="开始日期">
                            </div>
                            <div class="layui-input-inline" style="width:25px;text-align: center;line-height: 38px">
                                至
                            </div>
                            <div class="layui-input-inline" id="selldiv" style="width:100px">
                                <input type="text" name="sell[end_time]" class="layui-input" id="sell_end_time" readonly
                                    placeholder="结束日期">
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">结算时间</label>
                            <div class="layui-input-inline" style="width:100px">
                                <input type="text" name="settlement[start_time]" class="layui-input"
                                    id="settlement_start_time" readonly placeholder="开始日期">
                            </div>
                            <div class="layui-input-inline" style="width:25px;text-align: center;line-height: 38px">
                                至
                            </div>
                            <div class="layui-input-inline" id="settlementdiv" style="width:100px">
                                <input type="text" name="settlement[end_time]" class="layui-input"
                                    id="settlement_end_time" readonly placeholder="结束日期">
                            </div>
                        </div>
                        <div class="layui-inline" style="width:80px;">
                            <div class="layui-input-inline" style="width:80px;">
                                <div class="layui-btn" id="submit">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="layui-card-body layui-table-body layui-table-main">
                <div style="display: none">
                    <input type="hidden" name="result" id="result" value="0">
                </div>
                <table id="demo" lay-filter="demo"></table>
            </div>
        </div>
    </div>

    <script src="/static/jquery.min.js"></script>
    <script src="/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: "/layuiadmin/", //静态资源所在路径
        }).extend({
            index: "lib/index", //主入口模块
        }).use(["table", "laydate", 'form'], function () {
            $ = layui.jquery, form = layui.form, table = layui.table, laydate = layui.laydate;
            $(this).removeAttr("lay-key");
            laydate.render({
                elem: '#question_start_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
                done: function (value, date, endDate) {
                    $("#questiondiv").empty();
                    $("#questiondiv").append('<input type="text" type="text" name="question[end_time]" class="layui-input"  id="question_end_time" readonly  placeholder="结束日期" />');
                    laydate.render({
                        elem: '#question_end_time', //指定元素
                        trigger: 'click',
                        min: value,
                        max: '<?php echo date("Y-m-d");?>',
                    });
                },
            });
            laydate.render({
                elem: '#sell_start_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
                done: function (value, date, endDate) {
                    $("#selldiv").empty();
                    $("#selldiv").append('<input type="text" type="text" name="sell[end_time]" class="layui-input"  id="sell_end_time" readonly  placeholder="结束日期" />');
                    laydate.render({
                        elem: '#sell_end_time', //指定元素
                        trigger: 'click',
                        min: value,
                        max: '<?php echo date("Y-m-d");?>',
                    });
                },
            });
            laydate.render({
                elem: '#settlement_start_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
                done: function (value, date, endDate) {
                    $("#settlementdiv").empty();
                    $("#settlementdiv").append('<input type="text" type="text" name="settlement[end_time]" class="layui-input"  id="settlement_end_time" readonly  placeholder="结束日期" />');
                    laydate.render({
                        elem: '#settlement_end_time', //指定元素
                        trigger: 'click',
                        min: value,
                        max: '<?php echo date("Y-m-d");?>',
                    });
                },
            });
            laydate.render({
                elem: '#question_end_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
            });
            laydate.render({
                elem: '#sell_end_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
            });
            laydate.render({
                elem: '#settlement_end_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
            });
            $("#submit").click(function () {
                table.render(table_conf());
            });

            table.render(table_conf());
        });

        $("body").on('click', '.layui-table-body table tr ', function () {
            var data_index = $(this).attr('data-index');//得到当前的tr的index
            $(".layui-table-body tr").attr({ "style": "background:#FFFFFF" });//其他tr恢复颜色
            $(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#99ff99" });//改变当前tr颜色
        });

        function table_conf() {
            return {
                elem: '#demo',
                id: '#demo',
                url: '/admin/question/lists?' + $("#sbumitForm").serialize(),
                defaultToolbar: [
                    'filter', 'print', { title: '提示', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-table' },
                ],
                page: {
                    curr: 1   //默认从第一页开始搜索
                },
                isAloneColumn: false,
                opOrientation: 'h',
                method: "get",
                //where: $("#sbumitForm").serialize(),
                limit: 20,
                limits: [20, 30, 50, 100, 200, 500],
                text: {
                    none: '暂无相关数据！'//默认无数据
                },
                response: {
                    statusName: 'code', //数据状态的字段名称，默认：code
                    statusCode: 0,//成功的状态码，默认：0
                    msgName: 'msg', //状态信息的字段名称，默认：msg
                    countName: 'count', //数据总数的字段名称，默认：count
                    dataName: 'list', //数据列表的字段名称，默认：data
                },
                totalRow: true,//开启合计
                cols: [[
                    {
                        field: 'id', width: 150, title: '发起/封盘时间', align: 'center', totalRowText: '<font style="color: red">合计</font>', templet: function (item) {
                            return '<div width="150px" height="30px" style="font-size:13px">' + item['create_time'] + '</div><div width="150px" height="30px" style="font-size:13px">' + item['close_time'] + '</div>';
                        }
                    },
                    {
                        field: '', width: 150, title: '主播ID/昵称', align: 'center', templet: function (item) {
                            return item['nick_name'] + '(' + item['anchor_id'] + ')';
                        }
                    },
                    { field: 'live_title', width: 150, title: '直播标题', align: 'center' },
                    {
                        field: '', width: 200, title: '关联赛事/场次', align: 'center', templet: function (item) {
                            return item['match_title'];
                        }
                    },
                    {
                        field: '', width: 200, title: '问题 & 选项', align: 'center', templet: function (item) {
                            var content = '';
                            for (var x in item.content) {
                                content += ' <strong>' + item.content[x] + '</strong>' + ' VS ';
                            }

                            return '<div width="200px" height="30px">' + item['title'] + '</div><div width="200px" height="30px">' + content.substring(0, content.length - 3) + '</div>';
                        }
                    },
                    { field: 'amount', width: 100, title: '总投注', align: 'center', totalRow: true },
                    { field: 'number', width: 100, title: '参与人数', align: 'center', totalRow: true },
                    {
                        field: '', width: 160, title: '倍数', align: 'center', templet: function (item) {
                            var content = '';
                            for (var x in item.content) {
                                var odds = 0;
                                if (item.odds[x]) {
                                    odds = item.odds[x];
                                }
                                content += '<div width="200px" height="30px">' + item.content[x] + ': ' + odds + '</div>';
                            }

                            return content;
                        }
                    },
                    { field: 'min_bet', width: 100, title: '最小投注', align: 'center' },
                    { field: 'per_capita_betting', width: 100, title: '人均投注', align: 'center', totalRow: true },
                    { field: 'number_of_bets', width: 100, title: '人均次数', align: 'center', totalRow: true },
                    {
                        field: 'pay_status', width: 150, title: '状态', align: 'center', templet: function (item) {
                            if (item['pay_status'] == 0 && item['status'] == 5) {
                                return '作废再次结算中';
                            }

                            if (item['pay_status'] == 1 && item['status'] == 5) {
                                return '作废结算完成';
                            }

                            if (item['pay_status'] == 0 && item['status'] == 3) {
                                return '作废结算中';
                            }

                            if (item['pay_status'] == 1 && item['status'] == 3) {
                                return '作废结算完成';
                            }

                            if (item['pay_status']) {
                                return '已结算';
                            }

                            return '未结算';
                        }
                    },
                    {
                        field: '', width: 150, title: '封盘', align: 'center', templet: function (item) {
                            if (item.status > 1) {
                                return '封盘';
                            }

                            var end_time = item.end_time * 1000;
                            if (end_time <= 0) {
                                return '<div id="dsq_' + item.id + '">封盘</div>';
                            }
                            var crontable_id;

                            var dsq_id = item.id;

                            var nowtime = (new Date()).getTime();
                            if ((nowtime - end_time) >= 0) {
                                return '<div id="dsq_' + item.id + '">封盘</div>';
                            }

                            if (!item.id || item.id == 'undefined' || item.id == null) {
                                return '';
                            }

                            crontable_id = window.setInterval(function () {
                                var tempTime = (new Date()).getTime();
                                if ((tempTime - end_time) >= 0) {
                                    $("#dsq_" + dsq_id).html('封盘');
                                    window.clearInterval(crontable_id);
                                } else {
                                    var times = (end_time - tempTime) / 1000;     //times 是剩余时间总的秒数

                                    var d = parseInt(times / 86400); //天

                                    var h = parseInt(times / 60 / 60 % 24);      //计算小时
                                    h = h < 10 ? '0' + h : h;

                                    var m = parseInt(times / 60 % 60);         //计算分钟
                                    m = m < 10 ? '0' + m : m;

                                    var s = parseInt(times % 60);            //计算秒数
                                    s = s < 10 ? '0' + s : s;

                                    var htmlStr = '<div style="color: red;">剩余 </div><font color="red">' + h + "时" + m + "分" + s + '秒</font>';

                                    if (d > 0) {
                                        htmlStr = '<div style="color: red;">剩余 </div><font color="red">' + d + '天' + h + "时" + m + "分" + s + '秒</font>';
                                    }
                                    $("#dsq_" + dsq_id).html(htmlStr);
                                }

                            }, 1000);

                            return '<div id="dsq_' + item.id + '"></div>';
                        }
                    },
                    {
                        field: '', width: 150, title: '开奖结果', align: 'center', templet: function (item) {

                            if (item.status == 3) {
                                return '已作废';
                            }

                            if (item.status == 5) {
                                return '已作废';
                            }

                            if (item.status == 6) {
                                return '无效(一边无下注)';
                            }

                            if ((item.result - 1) >= 0 && item.content.hasOwnProperty(item.result - 1)) {
                                return item.content[(item.result - 1)];
                            }

                            return '待开奖';
                        }
                    },
                    {
                        field: 'settle_time', width: 150, title: '结算时间', align: 'center', templet: function (item) {
                            if (item['settle_time'] == '0000-00-00 00:00:00') {
                                return '';
                            }
                            return item['settle_time'];
                        }
                    },
                    {
                        title: '操作', height: 60, align: 'center', width: 200, fixed: "right", templet: function (item) {
                            var html = '<a class="layui-btn layui-btn-xs" style="background-color: #FFB800" onclick=\'info(' + item['id'] + ',"' + item['title'] + '",' + item['content_json'] + ')\'><i class="layui-icon"></i>详情</a>';
                            switch (item.status) {
                                case 1:
                                    html += '<a class="layui-btn layui-btn-xs" onclick="closed(' + item['id'] + ')"><i class="layui-icon"></i>封盘</a><a class="layui-btn layui-btn-danger layui-btn-xs" onclick="invalid(' + item['id'] + ',3,\'作废后本次竞猜本金将返回给参与人账号,\')"><i class="layui-icon"></i>作废</a>';
                                    break;
                                case 2:
                                    html += '<a class="layui-btn layui-btn-xs" style="background-color: #1E9FFF" onclick=\'open_lottery(' + item['id'] + ',"' + item['title'] + '",' + item['content_json'] + ')\'><i class="layui-icon"></i>开奖</a><a class="layui-btn layui-btn-danger layui-btn-xs" onclick="invalid(' + item['id'] + ',3,\'作废后本次竞猜本金将返回给参与人账号,\')"><i class="layui-icon"></i>作废</a>';
                                    break;
                                case 4:
                                    html += '<a class="layui-btn layui-btn-danger layui-btn-xs" onclick="invalid(' + item['id'] + ',5,\'作废后本次竞猜本金将返回给参与人账号,及撤回已派彩彩金,\')"><i class="layui-icon"></i>作废</a>';
                                    break;
                            }

                            return html;
                        }
                    }
                ]],
                done: function (res, curr, count) {
                    res.list.forEach(function (item, index) {

                    });
                },
            };
        }

        function closed(id) {
            layer.confirm('确定封盘吗？', function (index) {
                $.ajax({
                    type: "POST",//请求方式
                    url: '/admin/question/close', //请求地址
                    dataType: "json",//返回的数据类型
                    data: { "id": id },
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 2000 }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(data.msg, { icon: 2 });
                        }
                    },
                    error: function (e) {
                    }
                });
            });
        }

        function invalid(id, status, title) {
            layer.confirm(title + '是否确定？', function (index) {
                $.ajax({
                    type: "POST",//请求方式
                    url: '/admin/question/invalid', //请求地址
                    dataType: "json",//返回的数据类型
                    data: { "id": id, "status": status },
                    //请求成功
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 2000 }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(data.msg, { icon: 2 });
                        }
                    },
                    //请求失败，包含具体的错误信息
                    error: function (e) {
                    }
                });
            });
        }

        function open_lottery(id, title, item) {
            var content = '';
            for (var x in item) {
                content += '<a class="confirm-btn" onclick="choose_lottery(this,' + (parseInt(x) + 1) + ')">' + item[x] + '</a>';
            }
            var html = title;
            html += '<div style="align-content: center; margin-top:10px"><div class="confirm-btn">';
            html += content;
            html += '</div></div>';
            layer.confirm(html, { area: ['380px', '230px'], title: '<strong style="font-size: 13px">选择开奖结果</strong>' }, function (index) {
                var result = $("#result").val();
                if (result == 0) {
                    layer.msg('请选择开奖选项', { icon: 2, time: 3000 });
                    return false;
                }
                $.ajax({
                    type: "POST",//请求方式
                    url: '/admin/question/lottery', //请求地址
                    dataType: "json",//返回的数据类型
                    data: { "id": id, "result": result },
                    //请求成功
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 2000 }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(data.msg, { icon: 2 });
                        }
                    },
                    //请求失败，包含具体的错误信息
                    error: function (e) {
                    }
                });
            });
        }

        /*详情*/
        function info(id, title, item) {
            var content = '';
            for (var x in item) {
                content += ' ' + item[x] + ' VS ';
            }
            layer.open({
                type: 2,
                title: ['<strong>问题: ' + title + '  ' + content.substring(0, content.length - 3) + '</strong>', 'font-size:16px'],
                content: '/admin/question/info?id=' + id,
                area: ['920px', '580px'],
                //offset: '0px',
            });
        }

        function choose_lottery(obj, result) {
            $(".confirm-btn>a").each(function () {
                $(this).removeClass('color');
            });

            $(obj).addClass('color');
            $("#result").val(result);
        }

        var showtime = function () {
            var nowtime = new Date(),  //获取当前时间
                endtime = new Date("2020/8/8");  //定义结束时间
            var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
                leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
                lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
                leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
                lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
            return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
        }
    </script>
</body>

</html>